<template>
  <div>
    <el-row>
      <el-card>
        <el-form>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <el-form-item label="车辆类型">
                  <el-select
                    v-model="formData.truckTypeId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="车牌号码">
                  <el-input
                    style="width: 70%"
                    placeholder="请输入车牌号码"
                    v-model="formData.licensePlate"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8">
              <el-button type="primary" @click="submitSuo">搜索</el-button>
              <el-button @click="Qingkong">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div class="btn" style="background-color: white; margin-top: 20px">
        <a @click="quanbu('quan')">全部&nbsp;{{ numZong }}</a>
        <a @click="quanbu('kaishi')">可用&nbsp;{{ Chenum[1] }}</a>
        <a @click="quanbu('stop')">停用&nbsp;{{ Chenum[0] }}</a>
      </div>
      <el-card style="margin-top: 20px">
        <el-col>
          <el-button type="primary" size="medium">新增车辆</el-button>
        </el-col>
        <el-col>
          <el-table
            border
            stripe
            style="text-align: center; margin-top: 15px; margin-bottom: 20px"
            :data="tableDate"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column
              prop="licensePlate"
              label="车牌号码"
            ></el-table-column>
            <el-table-column
              prop="truckTypeName"
              label="车辆类型"
            ></el-table-column>
            <el-table-column
              prop="driverNum"
              label="司机数量"
            ></el-table-column>
            <el-table-column label="车辆状态">
              <template #default="{ row }">
                <span :class="row.workStatus === 0 ? 'span1' : 'span2'"></span>
                <span>{{ row.workStatus === 0 ? "停用" : "可用" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="deviceGpsId"
              label="GPS设备ID"
            ></el-table-column>
            <el-table-column
              prop="allowableLoad"
              label="实载重量（T）"
            ></el-table-column>
            <el-table-column
              prop="allowableVolume"
              label="实载体积（方）"
            ></el-table-column>
            <el-table-column label="操作" width="210">
              <template #default="{ row }">
                <el-button
                  style="color: deepskyblue"
                  type="text"
                  @click="qiehuan(row)"
                  >查看详情</el-button
                >
                <span style="margin: 7px; color: #ccc">|</span>
                <el-button style="color: deepskyblue" type="text"
                  >启用</el-button
                >
                <span style="margin: 7px; color: #ccc">|</span>
                <el-button style="color: deepskyblue" type="text"
                  >配置司机</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-bottom: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="this.page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import {
  getCheLiangListApi,
  getCheLiangListZongApi,
  getCheNumberApi,
} from "@/api/cheAdmin";
export default {
  data() {
    return {
      tableDate: [],
      tavleDateZong: [],
      Chenum: [],
      options: [],
      numZong: 0,
      total: 0,
      page: {
        page: 1,
        pageSize: 10,
      },
      formData: {
        truckTypeId: "",
        licensePlate: "",
      },
    };
  },
  created() {
    this.getCheMessageInfo();
  },
  methods: {
    qiehuan(row) {
      console.log(row);
      this.$router.push(`/Xiangqing/${row.id}`);
    },
    Qingkong() {
      this.formData = {
        truckTypeId: "",
        licensePlate: "",
      };
    },
    async submitSuo() {
      const SouSuo = { ...this.formData, ...this.page };
      const res = await getCheLiangListApi(SouSuo);
      // console.log(res.data.data);
      this.tableDate = res.data.data.items;
      this.total = +res.data.data.counts;
    },
    async quanbu(type) {
      if (type === "stop") {
        this.page.workStatus = 0;
        const res = await getCheLiangListApi(this.page);
        console.log(res.data.data);
        this.tableDate = res.data.data.items;
        this.total = +res.data.data.counts;
      } else if (type === "kaishi") {
        this.page.workStatus = 1;
        const res = await getCheLiangListApi(this.page);
        this.tableDate = res.data.data.items;
        this.total = +res.data.data.counts;
      } else if (type === "quan") {
        this.page = {
          page: 1,
          pageSize: 10,
        };
        const res = await getCheLiangListApi(this.page);
        this.tableDate = res.data.data.items;
        this.total = +res.data.data.counts;
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getCheMessageInfo();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.page = val;
      this.getCheMessageInfo();
    },
    async getCheMessageInfo() {
      const res = await getCheNumberApi();
      this.Chenum = res.data.data;
      this.numZong = +this.Chenum[0] + +this.Chenum[1];
      const res1 = await getCheLiangListApi(this.page);
      // console.log(res.data.data);
      this.tableDate = res1.data.data.items;
      this.total = +res1.data.data.counts;
      const res2 = await getCheLiangListZongApi();
      console.log(res2.data.data);
      res2.data.data.forEach((item) => {
        this.options.push({
          value: item.id,
          label: item.name,
        });
      });
      console.log(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-col-8 {
  height: 40px;
}
.btn {
  border-radius: 4px;
  height: 50px;
  a {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 120px;
    color: black;
    float: left;
  }
  a:active {
    background-color: rgb(255, 238, 235);
    color: rgb(225, 85, 54);
  }
}
.el-pagination {
  text-align: center;
}
.el-table .cell .span1 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 50%;
  margin-right: 4px;
}
.el-table .cell .span2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: rgb(29, 199, 121);
  border-radius: 50%;
  margin-right: 4px;
}
</style>
